<div class="modal-header">
  <div class="modal-title">货件详情-{{ i.shipmentId }}</div>
</div>
<nz-spin *ngIf="!i" class="modal-spin"></nz-spin>
<nz-steps [nzCurrent]="5">
  <nz-step nzTitle="设置数量"></nz-step>
  <nz-step nzTitle="打印标签"></nz-step>
  <nz-step nzTitle="检查货件"></nz-step>
  <nz-step nzTitle="准备货件"></nz-step>
  <nz-step nzTitle="货件总览"></nz-step>
</nz-steps>
<nz-space></nz-space>
<div sv-container *ngIf="detailOverview">
  <sv-title>货件信息</sv-title>
  <sv label="货件编号">{{ detailOverview['shipmentId'] }}</sv>
  <sv label="货件名称">{{ detailOverview['shipmentName'] }}</sv>
  <sv label="货件状态">
    <nz-tag>{{ detailOverview['shipmentStatusDesc'] }}</nz-tag>
  </sv>
  <sv label="履约中心">{{ detailOverview['fulfillmentCenterName'] }}</sv>
  <sv label="创建时间">{{ detailOverview['createdAt'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</sv>
  <sv label="更新时间">{{ detailOverview['closedAt'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</sv>
</div>
<nz-space></nz-space>
<div sv-container *ngIf="detailOverview" [col]="1">
  <sv-title>发货地址</sv-title>
  <sv label="发货地址">
    {{ detailOverview['shipFromAddress']['addressLine1'] }}, {{ detailOverview['shipFromAddress']['districtOrCounty'] }}
    ,
    {{ detailOverview['shipFromAddress']['city'] }}, {{ detailOverview['shipFromAddress']['stateOrProvince'] }},
    {{ detailOverview['shipFromAddress']['countryCode'] }}
  </sv>
</div>
<nz-space></nz-space>
<div sv-container *ngIf="detailOverview" [col]="1">
  <sv-title>收货地址</sv-title>
  <sv label="发货地址">
    {{ detailOverview['shipToAddress']['addressLine1'] }}, {{ detailOverview['shipToAddress']['districtOrCounty'] }},
    {{ detailOverview['shipToAddress']['city'] }}, {{ detailOverview['shipToAddress']['stateOrProvince'] }},
    {{ detailOverview['shipToAddress']['countryCode'] }}
  </sv>
</div>
<nz-space></nz-space>
<div sv-container *ngIf="detailOverview">
  <sv-title>商品数量</sv-title>
  <sv label="SKU">{{ detailOverview['skuSpecies'] }}</sv>
  <sv label="数量">{{ detailOverview['planQuantity'] }}</sv>
</div>
<nz-space></nz-space>
<nz-tabset>
  <nz-tab nzTitle="追踪货件">
    <nz-table #track_box [nzData]="tBoxView" [nzShowPagination]="false">
      <thead>
        <tr>
          <th class="text-center">箱子</th>
          <th class="text-center">物流单号</th>
          <th class="text-center">物流公司</th>
          <th class="text-center">状态</th>
          <th class="text-center">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of track_box.data">
          <td class="text-center">箱子{{ data['boxSeq'] }}（{{ data['boxNumber'] }}）</td>
          <td class="text-center">{{ data['boxNumber'] }}</td>
          <td class="text-center">{{ data['trackingNo'] }}</td>
          <td class="text-center">{{ data['logisticsCompany'] }}</td>
          <td class="text-center">-</td>
        </tr>
      </tbody>
    </nz-table>
  </nz-tab>
  <nz-tab nzTitle="所有商品" (nzSelect)="loadWareData(i.shopId, i.shipmentId)">
    <nz-select [(ngModel)]="boxSelected" *ngIf="tBoxView" (ngModelChange)="loadWareData(i.shopId, i.shipmentId, boxSelected)">
      <nz-option nzLabel="全部" nzValue=""></nz-option>
      <nz-option *ngFor="let b of tBoxView" nzLabel="箱子{{ b['boxSeq'] }}（{{ b['boxNumber'] }}）" [nzValue]="b['boxNumber']"></nz-option>
    </nz-select>
    <nz-tabset *ngIf="summary">
      <nz-tab nzTitle="汇总（{{ summary['all'] }}）" (nzSelect)="loadWareData(i.shopId, i.shipmentId, boxSelected, 'all')"></nz-tab>
      <nz-tab
        nzTitle="少件（{{ summary['shortage'] }}）"
        (nzSelect)="loadWareData(i.shopId, i.shipmentId, boxSelected, 'shortage')"
      ></nz-tab>
      <nz-tab nzTitle="多件（{{ summary['extra'] }}）" (nzSelect)="loadWareData(i.shopId, i.shipmentId, boxSelected, 'extra')"></nz-tab>
      <nz-tab nzTitle="坏件（{{ summary['broken'] }}）" (nzSelect)="loadWareData(i.shopId, i.shipmentId, boxSelected, 'broken')"></nz-tab>
      <nz-tab
        nzTitle="未知件（{{ summary['unknown'] }}）"
        (nzSelect)="loadWareData(i.shopId, i.shipmentId, boxSelected, 'unknown')"
      ></nz-tab>
    </nz-tabset>
    <nz-table #skuTable [nzData]="skus" [nzShowPagination]="false">
      <thead>
        <tr>
          <th class="text-center">商品</th>
          <th class="text-center">预计收件</th>
          <th class="text-center">实际收件</th>
          <th class="text-center">好件</th>
          <th class="text-center">坏件</th>
          <th class="text-center">少件</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of skuTable.data">
          <td>
            <nz-comment>
              <nz-comment-content>
                <ng-container>
                  <nz-image
                    [nzWidth]="80"
                    [nzHeight]="80"
                    style="float: left; padding-right: 10px"
                    nzSrc="{{ data['skuImageUrl'] }}"
                  ></nz-image>
                  <p>{{ data['itemTitle'] }}</p>
                  <p>{{ data['skuExtAttribute'] }}</p>
                  <p>Fordeal SKU: {{ data['skuId'] }}</p>
                  <p>商家SKU: {{ data['skuNo'] }}</p>
                  <p>
                    <ng-container *ngFor="let t of data['receiveTags']">
                      <nz-tag [nzColor]="'orange'">{{ tag[t] }}</nz-tag>
                    </ng-container>
                  </p>
                </ng-container>
              </nz-comment-content>
            </nz-comment>
          </td>
          <td class="text-center">{{ data['totalQuantity'] }}</td>
          <td class="text-center">{{ data['storageQuantity'] }}</td>
          <td class="text-center">{{ data['normalQuantity'] }}</td>
          <td class="text-center">{{ data['brokenQuantity'] }}</td>
          <td class="text-center">{{ data['shortageQuantity'] }}</td>
        </tr>
      </tbody>
    </nz-table>
  </nz-tab>
</nz-tabset>

<div class="modal-footer">
  <button nz-button type="button" (click)="close()">关闭</button>
</div>
